<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/*css 样式思路
			1.通配选择器：微软雅黑、#f5f5f5 浅灰、外边距至0
			2.#product_card:内边距，外边距、阴影【透明度.1】、文字居中
			3.img：边框倒角、内外边距？【微调】
			4.h3：颜色、内外边距？【微调】
			5.p：字体大小、颜色
			6.p+span：span、内外边距？【微调】、颜色
			*/
		   /* 基本重置样式 */
     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Microsoft YaHei', sans-serif;
      }
		   body{
			background-color: #f5f5f5;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 50px;
		   }
		   #product_card{
			width: 300px;  
			height: 500px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			padding: 20px;
			text-align: center; 
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		   }
		   /* 图片样式 */
		         #product_card img {
		           width: 100%; /* 图片宽度为卡片宽度 */
		           height: auto; /* 自动调整高度，保持比例 */
		           border-radius: 8px; /* 圆角效果 */
		           margin-bottom: 15px; /* 图片下方间距 */
		         }
		   
		         /* 产品名称样式 */
		         #product_card h3 {
		           font-size: 20px; /* 字体大小 */
		           color: #333; /* 字体颜色，深灰色 */
		           margin-bottom: 10px; /* 下边距 */
		         }
		   
		         /* 产品价格样式 */
		         #product_card p {
		           font-size: 16px; /* 字体大小 */
		           color: #e60012; /* 价格颜色，红色 */
		           margin-bottom: 5px; /* 下边距 */
		         }

		   #product_card p span {
		           font-size: 14px; /* 字体大小 */
		           color: #999; /* 评价数量颜色，浅灰色 */
		         }
		</style>
	</head>
	<body>
		<!-- 网页：1.html 结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/su7_海报.jpg"  width=249px  height=350px  alt="汽车">
			<h3>小米SU7</h3>
			<p>￥279999.00</p>
			<p><span>已有10万+评价</span></p>
		</div>
	</body>
</html>